<template>
    <div class="capital">
        <h1 class="title">{{$t('message.Capital')}}</h1>
        <div class="header">
            <p>
                {{$t('message.replacement')}}:
                <span>{{num}} USDT ≈ {{currencyNum}} CNY</span>
            </p>
            <img src="../../assets/images/logo.png" alt />
        </div>

        <ul class="main">
            <li>
                <div>
                    <p>{{$t('message.types')}}</p>
                </div>
                <div>
                    <p>{{$t('message.Coin')}}</p>
                </div>
                <div>
                    <p>{{$t('message.operation')}}</p>
                </div>
            </li>
            <li style="margin-top: 28px;" v-for="(item,index) in currencyList" :key="index">
                <div>
                    <img :src="item.imgUrl" alt />
                    <p>{{item.virtuaWalletName}}</p>
                </div>
                <div>
                    <p>
                        {{$t('message.available')}}:
                        <span>{{item.availableAmount}} {{item.virtuaWalletName}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp; {{$t('message.freeze')}}：
                        <span>{{item.freezeAmount}} {{item.virtuaWalletName}}</span>
                    </p>
                    <p>
                        {{$t('message.equivalent')}}：
                        <span>{{item.mory}} USDT</span>
                    </p>
                </div>
                <div>
                    <p>
                        <span @click="childMethod()">{{$t('message.Charge')}}</span>
                    </p>
                    <p>
                        <span @click="childMethod2()">{{$t('message.Mention')}}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
// import {
//     userVirtualWallet,
//     getExchangeRateByCoinName,
//     get24hrDataByTwoCoinName
// } from "../../api/api";
import { setTimeout } from "timers";
export default {
    data() {
        return {
            currencyList: [
                {
                    mory: ""
                }
            ],
            virtuaWalletName: "",
            Conversion: "",
            num: 0,
            currencyNum: 0
        };
    },
    mounted() {
        this.list();
        // setTimeout(() => {

        // },100)
    },
    methods: {
        childMethod() {
            this.$emit("fatherMethod");
        },
        childMethod2() {
            this.$emit("fatherMethod2");
        },
        addFun(arg1, arg2) {
            var r1, r2, m;
            try {
                r1 = arg1.toString().split(".")[1].length;
            } catch (e) {
                r1 = 0;
            }
            try {
                r2 = arg2.toString().split(".")[1].length;
            } catch (e) {
                r2 = 0;
            }
            m = Math.pow(10, Math.max(r1, r2));
            return (arg1 * m + arg2 * m) / m;
        },
        mulFun(arg1, arg2) {
            var m = 0,
                s1 = arg1.toString(),
                s2 = arg2.toString();
            try {
                m += s1.split(".")[1].length;
            } catch (e) {}
            try {
                m += s2.split(".")[1].length;
            } catch (e) {}
            return (
                (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
                Math.pow(10, m)
            );
        },
        list() {
            let data = {
                token: JSON.parse(window.sessionStorage.getItem("token")),
                virtuaWalletName: this.virtuaWalletName
            };
            userVirtualWallet(data).then(res => {
                this.currencyList = res.data.data;
                if (res.data.code == 200) {
                    for (let i = 0; i < res.data.data.length; i++) {
                        let data = {
                            motherCoinName: "USDT",
                            childCoinName: res.data.data[i].virtuaWalletName
                        };
                        get24hrDataByTwoCoinName(data).then(res => {
                            this.$set(
                                this.currencyList[i],
                                "mory",
                                this.mulFun(
                                    this.addFun(
                                        this.currencyList[i].availableAmount,
                                        this.currencyList[i].freezeAmount
                                    ),
                                    res.data.close
                                )
                            );
                            // this.num += this.currencyList[i].mory;
                            this.num = this.addFun(
                                this.num,
                                this.currencyList[i].mory
                            );
                        });
                    }
                }
                getExchangeRateByCoinName({
                    childCoinName: "usdt",
                    type: "0"
                }).then(res => {
                    this.currencyNum = this.num * res.data.data.coinRate;
                });
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.capital {
    .title {
        font-size: 18px;
        font-weight: 700;
        background: rgba(247, 247, 251, 1);
        line-height: 40px;
        padding-left: 20px;
        width: 100%;
    }
    .header {
        border: 1px solid #eee;
        margin: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            line-height: 100px;
            padding-left: 20px;
            color: #999;
            font-weight: 700;
            span {
                color: #000;
            }
        }
        img {
            padding: 10px;
            box-sizing: border-box;
        }
    }
    .main {
        li {
            margin-top: 5px;
            > div {
                display: inline-block;
            }
            div:nth-child(1) {
                width: 20%;
                img {
                    margin-left: 20px;
                    width: 30px;
                }
                p {
                    padding-left: 20px;
                    font-weight: 700;
                }
            }
            div:nth-child(2) {
                width: 50%;
                p {
                    line-height: 24px;
                }
            }
            div:nth-child(3) {
                width: 20%;
                p:nth-child(1) {
                    line-height: 24px;
                    span {
                        padding: 8px 16px;
                        background: linear-gradient(
                            -90deg,
                            rgba(104, 129, 255, 1),
                            rgba(115, 156, 255, 1)
                        );
                        border-radius: 20px;
                        color: #fff;
                    }
                }
                p:nth-child(2) {
                    line-height: 24px;
                    margin-top: 15px;
                    span {
                        padding: 8px 16px;
                        border: 1px solid rgba(230, 230, 230, 1);
                        border-radius: 20px;
                        color: #6881ff;
                    }
                }
            }
        }
        li:nth-child(1) {
            background: #f7f7fb;
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            div:nth-child(1) {
                width: 20%;
                p {
                    line-height: 50px;
                    text-align: left;
                    padding-left: 20px;
                }
            }
            div:nth-child(2) {
                width: 50%;
            }
            div:nth-child(3) {
                width: 20%;
            }
        }
    }
}
</style>